<template>
  <div class="transfer-card">
    <div class="header">
      <span>学生输送情况</span>
      <span class="unit-text">单位/人</span>
    </div>
    <div class="statistics-row">
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">体育系统输送</span>
          <span class="number">{{ sportsCount.toLocaleString() }}</span>
        </div>
      </div>
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">教育系统输送</span>
          <span class="number">{{ educationCount.toLocaleString() }}</span>
        </div>
      </div>
    </div>
    <div class="chart" ref="lineChart" id="Chart5"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import { getTransportData } from '@/api/statistics'

  export default {
    data() {
      return {
        sportsCount: 0,
        educationCount: 0,
        chart: null,
        chartData: {
          categories: [],
          currentYear: [],
          lastYear: []
        }
      }
    },
    async created() {
      await this.drawChart()
    },
    methods: {
      async drawChart() {
        try {
          const res = await getTransportData({ year: new Date().getFullYear() })
          if (res && res.data) {
            this.sportsCount = res.data.sportsCount
            this.educationCount = res.data.educationCount
            this.chartData = {
              categories: res.data.categories,
              currentYear: res.data.currentYear,
              lastYear: res.data.lastYear
            }
            this.$nextTick(() => {
              this.initChart()
            })
          }
        } catch (error) {
          console.error('获取学生输送数据失败:', error)
        }
      },
      initChart() {
        this.chart = echarts.init(document.getElementById("Chart5"))
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['以往年度累计人数', '上一年度人数'],
            top: 0
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '40px',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.chartData.categories,
            axisLabel: {
              interval: 0,
              rotate: 30
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [{
              name: '以往年度累计人数',
              type: 'line',
              smooth: true,
              data: this.chartData.currentYear,
              itemStyle: {
                color: '#409EFF'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(64,158,255,0.2)'
                  }, {
                    offset: 1,
                    color: 'rgba(64,158,255,0)'
                  }]
                }
              }
            },
            {
              name: '上一年度人数',
              type: 'line',
              smooth: true,
              data: this.chartData.lastYear,
              itemStyle: {
                color: '#67C23A'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(103,194,58,0.2)'
                  }, {
                    offset: 1,
                    color: 'rgba(103,194,58,0)'
                  }]
                }
              }
            }
          ]
        }
        this.chart.setOption(option)
        // 监听父元素大小变化
        const ro = new ResizeObserver(entries => {
          for (let entry of entries) {
            const cr = entry.contentRect;
            if (this.chart) {
              this.chart.resize();
            }
          }
        });
        ro.observe(Chart);
      }
    },
    beforeDestroy() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
    }
  }
</script>

<style scoped>
  .transfer-card {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
  }

  .unit-text {
    font-size: 14px;
    color: #999;
    font-weight: normal;
  }

  .statistics-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    background-color: #f0f2f5;
    padding: 10px;
    border-radius: 4px;
  }

  .info {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .unit-line {
    display: inline-block;
    width: 4px;
    height: 40px;
    background-color: #409EFF;
    margin-right: 8px;
  }

  .text {
    display: flex;
    flex-direction: column;
  }

  .unit {
    font-size: 14px;
    color: #999;
  }

  .number {
    font-size: 28px;
    font-weight: bold;
    color: #333;
  }

  .chart {
    width: 100%;
    height: 250px;
  }
</style>
